import {Component, Input, OnInit} from '@angular/core';
import {ContentService} from '../content.service';
import * as echarts from 'echarts';

@Component({
  selector: 'app-area-spread',
  templateUrl: './area-spread.component.html',
  styleUrls: ['./area-spread.component.less']
})
export class AreaSpreadComponent implements OnInit {
  dataList = [];
  yearList = [];
  @Input() heightCount: string;
  @Input() dataBySearch: any;

  constructor(private cService: ContentService) {
  }

  ngOnInit(): void {
    this.getMapTips();
  }

  getMapTips() {
    this.cService.getAllYears().subscribe(res => {
      this.yearList = res.result;
      if (this.dataBySearch) {
        this.getMap(this.dataBySearch);

      } else {
        this.cService.getProvinceTips().subscribe(res => {
          this.dataList = res.result;
          this.getMap(this.dataList);
        });
      }
    });
  }

  getMap(option: any) {
    this.cService.getGeoJson('assets/map/json/china.json').subscribe(data => {
      echarts.registerMap('china', data);
      const el = document.getElementById('area-spread') as HTMLDivElement;
      const myCharts = echarts.init(el);
      const options1 = [];
      for (const year of this.yearList) {
        const seriesItem = {
          series: {data: option[year]}
        };
        options1.push(seriesItem);
      }
      myCharts.setOption({
        baseOption: {
          timeline: {
            axisType: 'category',
            autoPlay: true,
            playInterval: 1000,
            data: this.yearList,
            label: {
              formatter(s) {
                return (new Date(s)).getFullYear();
              }
            },
            bottom: 0
          },
          tooltip: {
            // 数据格式化
            formatter(params) {
              return params.seriesName + '<br />' + params.name + '：' + params.value;
            }
          },
          geo: {
            map: 'china',
            roam: false,
            zoom: 1.23,
            label: {
              normal: {
                show: true,
                fontSize: '10',
                color: 'rgba(0,0,0,0.7)'
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: '#F3B329',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
          },
          // 背景色
          visualMap: {
            min: 1,
            max: 5,                 // todo: 最大值应该从接口返回的数据来设置?。  为了演示, 临时调的比较小。
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['#EEEEEE', 'lightskyblue', 'yellow', 'orangered']
            }
          },
          series: [{
            name: '分布量',
            type: 'map',
            geoIndex: 0,
          }]
        },
        options: options1
        //   [
        //   {
        //     series: [
        //       {data: option}
        //     ]
        //   }, {
        //     series: [
        //       {data: option}
        //     ]
        //   }, {
        //     series: [
        //       {data: option}
        //     ]
        //   }
        // ]
      });
      myCharts.resize({height: this.heightCount});

    });
  }
}
